import axios from "../axios/index";
import React, { useEffect } from "react";
import { useLocation, useParams, useNavigate } from "react-router-dom";
import { Button, Input, Form, Cell, Dialog, Picker, Toast } from "react-vant";
type Props = {};

const Bianji = (props: Props) => {
  const location = useLocation();
  const navigate = useNavigate();
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(location.state);
  }, []);
  const onFinish = (values: any) => {
    console.log(values);
    axios
      .put(`http://localhost:8080/bianji/${location.state.id}`, {
        type: values.type,
        name: values.name,
        zjlx: values.zjlx,
        code: values.code,
        tel: values.tel,
        status: false,
      })
      .then((res) => {
        navigate("/passenger");
      });
  };
  console.log(location.state);
  return (
    <div className="bianjis">
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: "16px 16px 0" }}>
            <Button round nativeType="submit" type="primary" block>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item
          name="type"
          initialValue="成人票"
          label="乘客类型"
          trigger="onConfirm"
          onClick={(_, action: any) => {
            action.current?.open();
          }}
        >
          <Picker popup columns={["成人票", "儿童票", "残疾票", "军人票"]}>
            {(val) => val || "请选择从乘客类型"}
          </Picker>
        </Form.Item>
        <Form.Item
          tooltip={{
            message:
              "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
          }}
          rules={[{ required: true, message: "请填写用户名" }]}
          name="name"
          label="姓名"
        >
          <Input placeholder="与乘客姓名保持一致" />
        </Form.Item>

        <Form.Item
          name="zjlx"
          initialValue="身份证"
          label="证件类型"
          trigger="onConfirm"
          onClick={(_, action: any) => {
            action.current?.open();
          }}
        >
          <Picker popup columns={["身份证", "外籍证"]}>
            {(val) => val || "请选择证件类型"}
          </Picker>
        </Form.Item>
        <Form.Item
          tooltip={{
            message:
              "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
          }}
          rules={[{ required: true, message: "请填写用户名" }]}
          name="code"
          label="证件号码"
        >
          <Input placeholder="与乘客号码保持一致" />
        </Form.Item>
        <Form.Item
          tooltip={{
            message:
              "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
          }}
          rules={[{ required: true, message: "请填写用户名" }]}
          name="tel"
          label="手机号码"
        >
          <Input placeholder="请准确填写手机号" />
        </Form.Item>
      </Form>
    </div>
  );
};

export default Bianji;
